package com.mazaiting.emotion.fragment

import android.os.Bundle
import android.util.ArrayMap
import android.view.KeyEvent
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.AdapterView
import android.widget.GridView
import android.widget.LinearLayout
import androidx.viewpager.widget.ViewPager

import com.mazaiting.emotion.R
import com.mazaiting.emotion.adapter.EmotionGridViewAdapter
import com.mazaiting.emotion.adapter.EmotionPagerAdapter
import com.mazaiting.emotion.util.DisplayUtil
import com.mazaiting.emotion.util.EmotionUtil
import com.mazaiting.emotion.util.GlobalOnItemClickManagerUtil
import com.mazaiting.emotion.view.IndicatorView
import com.mazaiting.log.L
import java.util.ArrayList

/**
 * 表情模板
 */
class EmotionTemplateFragment : Fragment() {

    companion object {
        /**
         * 创建表情模板实例
         */
        @JvmStatic
        fun newInstance() = EmotionTemplateFragment()
    }

    /**
     * 指示器
     */
    private var mIvPoint: IndicatorView? = null
    /**
     * 轮播图
     */
    private var mVpEmotion: ViewPager? = null
    /**
     * 表情适配器
     */
    private var emotionPagerGvAdapter: EmotionPagerAdapter? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val rootView = inflater.inflate(R.layout.fragment_emotiom_template, container, false)
        initView(rootView)
        initData()
        initListener()
        return rootView
    }

    /**
     * 初始化 View
     * @param view 根视图
     */
    private fun initView(view: View) {
        // 获取指示器
        mIvPoint = view.findViewById(R.id.iv_point)
        // 获取 ViewPager
        mVpEmotion = view.findViewById(R.id.vp_emotion)
    }

    /**
     * 初始化数据
     */
    private fun initData() {
        initEmotion()
    }

    /**
     * 初始化表情面板
     * 思路：获取表情的总数，按每行存放7个表情，动态计算出每个表情所占的宽度大小（包含间距），
     *      而每个表情的高与宽应该是相等的，这里我们约定只存放3行
     *      每个面板最多存放7*3=21个表情，再减去一个删除键，即每个面板包含20个表情
     *      根据表情总数，循环创建多个容量为20的List，存放表情，对于大小不满20进行特殊
     *      处理即可
     */
    private fun initEmotion() {
        if (null != activity) {
            // 获取屏幕宽度
            val screenWidth = DisplayUtil.getScreenWidthPixel(activity!!)
            // item的间距
            val spacing = DisplayUtil.dp2px(activity!!, 12.0f)
            // 动态计算item的宽度和高度
            val itemWidth = (screenWidth - spacing * 8) / 7
            // 动态计算 GridView 的总高度
            val gvHeight = itemWidth * 3 + spacing * 6
            // 表示面板列表
            val emotionViews = ArrayList<GridView>()
            // 表情名称
            var emotionNames: MutableList<String> = ArrayList()
            if (!EmotionUtil.getEmojiMap(EmotionUtil.EMOTION_CLASSIC_TYPE).isNullOrEmpty()) {
                // 遍历所有的表情的key
                for (emotionName in EmotionUtil.getEmojiMap(EmotionUtil.EMOTION_CLASSIC_TYPE)!!.keys) {
                    // 添加表情名称
                    emotionNames.add(emotionName)
                    // 每20个表情作为一组,同时添加到ViewPager对应的view集合中
                    if (emotionNames.size == 20) {
                        // 创建表格布局
                        val gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight)
                        emotionViews.add(gv)
                        // 添加完一组表情,重新创建一个表情名字集合
                        emotionNames = ArrayList()
                    }
                }
            }
            // 判断最后是否有不足20个表情的剩余情况
            if (emotionNames.size > 0) {
                val gv = createEmotionGridView(emotionNames, screenWidth, spacing, itemWidth, gvHeight)
                emotionViews.add(gv)
            }

            //初始化指示器
            mIvPoint?.initIndicator(emotionViews.size)
            // 将多个GridView添加显示到ViewPager中
            emotionPagerGvAdapter = EmotionPagerAdapter(emotionViews)
            // 设置适配器
            mVpEmotion?.adapter = emotionPagerGvAdapter
            // 设置布局参数
            val params = LinearLayout.LayoutParams(screenWidth, gvHeight)
            mVpEmotion?.layoutParams = params
        }
    }

    /**
     * 创建显示表情的 GridView
     * @param emotionNames 表情名称列表
     * @param gvWidth 屏幕宽度
     * @param padding 内边距
     * @param itemWidth 条目宽度
     * @param gvHeight GridView 高度
     */
    private fun createEmotionGridView(
        emotionNames: MutableList<String>,
        gvWidth: Int,
        padding: Int,
        itemWidth: Int,
        gvHeight: Int
    ): GridView {
        // 创建GridView
        val gv = GridView(activity!!)
        //设置点击背景透明
        gv.setSelector(android.R.color.transparent)
        //设置7列
        gv.numColumns = 7
        gv.setPadding(padding, padding, padding, padding)
        gv.horizontalSpacing = padding
        gv.verticalSpacing = padding * 2
        //设置GridView的宽高
        val params = ViewGroup.LayoutParams(gvWidth, gvHeight)
        gv.layoutParams = params
        if (!EmotionUtil.getEmojiMap(EmotionUtil.EMOTION_CLASSIC_TYPE).isNullOrEmpty()) {
            // 给GridView设置表情图片
            val adapter = EmotionGridViewAdapter(
                activity!!,
                emotionNames,
                itemWidth,
                EmotionUtil.getEmojiMap(EmotionUtil.EMOTION_CLASSIC_TYPE)!!
                )
            gv.adapter = adapter
            //设置全局点击事件
            gv.onItemClickListener = GlobalOnItemClickManagerUtil.getInstance(context!!).getOnItemClickListener()
        }
        return gv
    }

    /**
     * 初始化监听
     */
    private fun initListener() {
        /**
         * 之前的位置
         */
        var oldPosition = 0
        // 页面改变监听
        mVpEmotion?.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{

            override fun onPageScrollStateChanged(state: Int) {}

            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}

            override fun onPageSelected(position: Int) {
                // 跳转到下一个位置
                mIvPoint?.toNext(oldPosition, position)
                oldPosition = position
            }
        })
    }


}
